<template>
    <div class="page-staff-manage">
        <!-- <ManageHeader v-if="userBasicInfo" :info="userBasicInfo" bg-color="red"/> -->
        <div class="main">
            <SearchBar v-model="tempName" placeholder="搜索购买者" @search="onClickSearch" />

            <div class="picker-box">
                <SelectShop v-model="selectedShops" :options="userBasicInfo.shop" />
                <TimePicker1 @search="onClickTimeSearch" />
            </div>

            <div v-if="orderList.length" class="order-wrap">
                <OrderCard
                    v-for="(order, index) in orderList"
                    @resetOrderList="resetOrderList"
                    @showType="showType"
                    :key="index"
                    label-color="blue"
                    :order="order"
                    :order-key="orderKey"
                    :final="order.final_payment"
                    :delivery="order.delivery"
                    :buyer-confirm="order.buyer_confirm"
                    :detail="order.detail"
                    :gift="order.gift"
                    :is-prepay="order.is_prepay"
                    :order-id="order.id"
                    :link-id="order.link_id"
                    :has-btn="true"
                    :cover="order.cover"
                    :title="order.title"
                    :nickname="order.name ? order.name : order.nickname"
                    :price="order.price"
                    :original-price="order.original_price"
                    :coupon-pay="order.coupon_pay"
                    :createdAt="order.created_at"
                    :referrer="order.referrer_name ? order.referrer_name : order.referrer_nickname"
                    :referrer-type="order.referrerType"
                    :referrer-level="order.referrer_level"
                    :is-finish="order.is_finish"
                    :order-status="order.status"
                    :order-type="order.type"
                    :mobile="order.mobile"
                    :buyer-remark="order.buyer_remark" />
            </div>
            <ListEmpty v-else />
        </div>
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import { ROUTE_NAME } from '@/lib/constant';

import SearchInput from '@/components/search/searchInput.vue';
import ManageHeader from '@/features/manage/header.vue';
import OrderCard from '@/features/manage/orderCard.vue';
import TimePicker1 from '@/features/manage/timePicker1.vue';
import SelectShop from '@/features/manage/select.vue';
import { EMPTY_LIST } from '@/lib/constant';
import { getOrderKey, debounce } from '@/lib/utils';
import store from '@/store';
import { Component, Vue, Watch } from 'vue-property-decorator';
import ListEmpty from '@/components/list/listEmpty.vue';
import SearchBar from '@/module/manage/components/searchBar.vue';

@Component({
    name: 'MerchantOrderManage',
    components: {
        SearchInput,
        ManageHeader,
        OrderCard,
        TimePicker1,
        SelectShop,
        ListEmpty,
        SearchBar,
    },
})
export default class MerchantOrderManage extends Vue {
    public peopleSelectOptionsVisible = false;
    public tempName = '';
    public name = '';
    public debounceGetPeopleList: any = null;
    public selectedShops: number[] = [];
    public startDate: string | null = null;
    public endDate: string | null = null;

    public async showType(_data){
        const res = await store.dispatch('order/getManageOrderDetail', {
            orderId: _data.orderId,
        });
        if (res.statusCode !== 200 || res.data.status !== 0) {
            wx.showToast({
                title: '订单不存在',
                icon: 'none',
            });

        }else{
            if(res.data.data == null){
                wx.showToast({
                    title: '订单不存在',
                    icon: 'none',
                });
            }else{
                api.push({
                    name: ROUTE_NAME.ORDER_MANAGE_ORDER_DETAIL,
                    params: {
                        orderId: _data.orderId+ '',
                    }
                })
            }
        }
        
    }

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    public get orderListMap() {
        return store.state.manage.orderListMap;
    }
    public get orderMap() {
        return store.state.manage.orderMap;
    }
    public get userSearchMap() {
        return store.state.manage.userSearchMap;
    }
    public get orderKey() {
        return getOrderKey({
            name: this.name,
            shopId: this.selectedShops,
            level: 3,
            start: this.startDate,
            end: this.endDate,
        });
    }
    public get orderList() {
        const wrap = this.orderListMap[this.orderKey] || EMPTY_LIST;
        return wrap.list.map((id) => this.orderMap[id]);
    }

    @Watch('orderKey')
    public onOrderKeyChange(val: any) {
        // console.log('page key', val);
    }
    @Watch('selectedShops')
    public onSelectedShopsChange(val: any) {
        this.getOrderList(true);
    }

    public async resetOrderList() {
        this.getOrderList(true);
    }

    public onPeopleSelectFocus() {
        this.peopleSelectOptionsVisible = true;
    }

    public onPeopleSelectBlur() {
        this.peopleSelectOptionsVisible = false;
    }

    public onClickSearch() {
        this.name = this.tempName;
        this.getOrderList(true);
    }
    public onClickTimeSearch(obj) {
        this.startDate = obj.startDate;
        this.endDate = obj.endDate;
        this.getOrderList(true);
    }

    public async getOrderList(forceUpdate = false) {
        const params = {
            offset: this.orderList.length,
            count: 10,
            level: 3,
            start: this.startDate,
            end: this.endDate,
            shopId: this.selectedShops,
        };
        if (this.name) {
            Object.assign(params, {
                name: this.name,
            });
        }
        if (forceUpdate) {
            Object.assign(params, {
                offset: 0,
                forceUpdate,
            });
        }
        await store.dispatch('manage/getOrderList', params);
    }
    public async onReachBottom() {
        await this.getOrderList();
    }

    // 下拉刷新
    async onPullDownRefresh() {
        store.commit('utils/startPulldown');
        const params = {
            offset: 0,
            count: 10,
            level: 3,
            start: this.startDate,
            end: this.endDate,
            shopId: this.selectedShops,
            forceUpdate: true
        };
        await store.dispatch('manage/getOrderList', params);
        store.commit('utils/endPulldown');
    }

    public async created() {
        this.getOrderList();

        window.addEventListener('wxshow', () => {
            this.getOrderList(true);
        });
        window.addEventListener('reachbottom', this.onReachBottom);
        window.addEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
        window.removeEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-staff-manage {
    min-height: 100%;
    background-color: #f8f8f8;

    .picker-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
    }

    .main {
        background-color: #f8f8f8;
        .order-wrap {
            padding: 0 12rpx;
        }
    }
}

</style>
